<template>
    <view :style="{ direction: $t('dir') }" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'" style="background: #f9f9f9">
        <!-- 头部导航栏 -->
        <navbar v-if="!detailLoading" :title="$t('detail')" bgLayer="#fff" :navbarBg="'rgba(255, 255, 255, ' + navStyle.backgroundBg + ')'" :minHeight="0" :backColor="navStyle.backColor" :titleColor="navStyle.backColor" :textShadow="navStyle.backgroundBg < 0.6" />

        <view v-if="detailLoading" class="main d-flex flex-center bg-white" style="height: 100vh">
            <u-loading-icon mode="circle" style="width: 18vw; height: 18vw" size="50" color="var(--app-color)" bold></u-loading-icon>
        </view>
        <view class="info-detail main" v-else>
            <view class="p-relative" style="direction: ltr">
                <!-- 图片 -->
                <u-swiper v-if="swiperTypesActive == 1" :list="detail.images" :current="swiperCurrent" circular keyName="" height="100vw" bgColor="transparent" imgMode="aspectFill" @change="swiperChange" @click="$tools.previewImage(detail.images, detail.images[swiperCurrent])"> </u-swiper>
                <u-swiper v-if="swiperTypesActive == 2" :list="[detail.tenancy_map]" :current="0" circular keyName="" height="100vw" bgColor="transparent" imgMode="aspectFill" @click="$tools.previewImage([detail.tenancy_map], detail.tenancy_map)"> </u-swiper>
                <u-swiper v-if="swiperTypesActive == 3" :list="[detail.video]" :current="0" circular keyName="" height="100vw" bgColor="transparent" imgMode="aspectFill"> </u-swiper>

                <view class="p-absolute" style="bottom: 90rpx; left: 24vw; ; box-sizing: border-box;padding" :style="swiperTypesActive == 3 ? '' : 'z-index: 999'" v-if="detail.tenancy_map || detail.video">
                    <view class="row items-center justify-between pa-xs px-md mtt">
                        <view class="mx-sm px-sm py-xs rounded-26" :class="swiperTypesActive == 1 ? 'text-dark bg-white' : 'text-white'" @click="swiperTypesActive = 1">{{ $t('tupian') }}</view>
                        <view class="mx-xs px-sm py-xs rounded-26" v-if="detail.tenancy_map" :class="swiperTypesActive == 2 ? 'text-dark bg-white' : 'text-white'" @click="swiperTypesActive = 2">{{ $t('huxingtu') }}</view>
                        <view class="mx-xs px-sm py-xs rounded-26" v-if="detail.video" :class="swiperTypesActive == 3 ? 'text-dark bg-white' : 'text-white'" @click="swiperTypesActive = 3">{{ $t('house_filim') }}</view>
                    </view>
                </view>
            </view>

            <view class="p-relative" :style="swiperTypesActive == 3 ? '' : 'margin-top: -80rpx'" style="z-index: 99; margin-right: 20rpx; margin-left: 20rpx">
                <view class="pa-md bg-white rounded-26">
                    <view class="fs-lg" :class="'dir-' + $tools.strDir(detail['name' + $t('k1')])">{{ detail['name' + $t('k1')] || detail.name || detail.name_zh }}</view>
                    <view class="row items-center justify-between mt-md fs-xs text-gray">
                        <view>
                            <view class="fs-sm" style="color: #fc4c38" v-if="type == 'zufang'">￥{{ detail.rent }}</view>
                            <view class="fs-sm" style="color: #fc4c38" v-else>{{ $tools.formatNumber(detail.price) }}</view>
                            <view>{{ type == 'zufang' ? $t('zufei') : $t('shoujia') }}</view>
                            <view class="row items-center pt-lg pa-sm button" style="color: #bfbfbf" @click="collect">
                                <u-icon v-if="detail.isCollection" name="star-fill" color="var(--app-color)" size="16"></u-icon>
                                <u-icon v-else name="star" color="#BFBFBF" size="16"></u-icon>
                                <view style="margin: 0 2px">{{ detail.isCollection ? $t('yishoucang') : $t('shoucang') }}</view>
                            </view>
                        </view>
                        <view>
                            <view class="fs-sm" style="color: #fc4c38"
                                >{{ detail.bedroom }}{{ $t('shi') }} {{ detail.parlor }}{{ $t('ting') }}
                                <text v-if="detail.toilet > 1"> {{ detail.toilet }}{{ $t('wei') }}</text>
                            </view>
                            <view>{{ $t('huxing') }}</view>
                            <view class="row items-center pt-lg pa-sm wx-button p-relative button" style="color: #bfbfbf">
                                <button openType="share"></button>
                                <u-icon name="share" color="#BFBFBF" size="16"></u-icon>
                                <view style="margin: 0 2px">{{ $t('send') }}</view>
                            </view>
                        </view>
                        <view>
                            <view class="fs-sm" style="color: #fc4c38">{{ detail.square_num }} {{ $t('pingfangmi') }}</view>
                            <view>{{ $t('mianji') }}</view>
                            <view class="row items-center pt-lg py-sm button" style="color: #bfbfbf">
                                <view class="fs-sm mx-xs">#</view>
                                {{ $t('wangfubianhao') }}:
                                <view style="margin: 0 2px">{{ detail.id }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="pa-md bg-white rounded-26" style="margin-top: 10rpx">
                    <view v-for="(item, i) in details" :key="i" class="row items-center justify-between fs-sm">
                        <view v-if="item.type ? item.type == type : true" class="mb-sm row items-center justify-between">
                            <view class="row items-center" style="min-width: 50vw" v-if="detail[item.v] || item.valShow">
                                <view class="text-gray">{{ item['name' + $t('k')] }}:</view>
                                <view class="ma-xs" v-if="item.v == 'house_state'">{{ house_stateList[detail.house_state].label }}</view>
                                <view class="ma-xs" v-else-if="item.v == 'fitment'">{{ fitmentList[detail.fitment].label }}</view>
                                <view class="ma-xs" v-else-if="item.v == 'direction'">{{ directionList[detail.direction].label }}</view>
                                <view class="ma-xs" v-else-if="item.v == 'period'">{{ period_list[detail.period].label }}</view>
                                <view class="ma-xs" v-else-if="item.v == 'city_info'">{{ detail.city_info ? detail.city_info['name' + $t('k')] : '' }} {{ detail.region_info ? detail.region_info['name' + $t('k')] : '' }}</view>
                                <view class="ma-xs" v-else-if="item.v == 'square_price'">{{ detail.square_price }}￥ / m²</view>
                                <view class="ma-xs dir-ltr" v-else-if="item.v == 'square_num'">{{ detail.square_num }}m²</view>
                                <view class="ma-xs dir-ltr" v-else-if="item.v == 'create_time'">{{ detail.create_time ? detail.create_time : '' }}</view>
                                <view class="ma-xs" v-else-if="item.v == 'advance_payment'">{{ detail.advance_payment ? $tools.formatNumber(detail.advance_payment) : 0 }}</view>
                                <view class="ma-xs dir-ltr" v-else-if="item.v == 'updated_at'">{{ detail.updated_at.substr(0, 10) }}</view>
                                <view class="ma-xs dir-ltr" v-else-if="item.v == 'commission'">{{ detail.commission }}%</view>
                                <view class="ma-xs" v-else-if="item.v == 'house_layers'">{{ $t('inAll') }}{{ $t('dir') == 'rtl' ? ' ' : '' }}{{ detail.house_layers }}{{ $t('dir') == 'rtl' ? ' ' : '' }}{{ $t('lou') }} / {{ detail.layer_level ? layer_levelList[detail.layer_level - 1]['name' + $t('k')] : checkThirdPart(detail.floors_house_num, detail.house_layers) }}</view>
                                <view class="ma-xs" v-else>{{ detail[item.v] }}</view>
                            </view>
                            <view class="row flex-center" v-if="item.k1 && detail[item.v1]" style="width: 44%">
                                <view class="text-gray">{{ item['name1' + $t('k')] }}:</view>
                                <view class="mx-xs" v-if="item.v1 == 'elevator_num'">{{ detail[item.v1] == 1 ? $t('you') : $t('wu') }}</view>
                                <view class="mx-xs" v-else>{{ detail[item.v1] }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- <view class="py-md px-sm row items-center justify-between fs-xs" style="color: #bfbfbf">
                    <view class="row items-center">
                        <u-icon name="empty-order" color="#BFBFBF" size="16"></u-icon>
                        <view>خىيىم-خەتەر ئەسكەرتىشى</view>
                    </view>
                    <view class="row items-center">
                        <u-icon name="grid" color="#BFBFBF" size="16"></u-icon>
                        <view>ئۆي پەرىق ئېتىش كود نومۇرى</view>
                    </view>
                </view> -->

                <view class="pa-md bg-white rounded-26" style="margin-top: 10rpx">
                    <view class="row items-center justify-between mb-md">
                        <view class="fs-xl">{{ $t('weizhijizhoubian') }}</view>
                    </view>
                    <!-- <image src="https://jembol.xingxinggu.cn/files/map.png" mode="scaleToFill" style="width: 100%; height: 290rpx; border-radius: 2px" /> -->
                    <map
                        :latitude="detail.latitude"
                        :longitude="detail.longitude"
                        :enable-scroll="false"
                        width="100%"
                        height="100%"
                        :markers="[
                            {
                                id: 11,
                                latitude: detail.latitude,
                                longitude: detail.longitude,
                                title: detail['name' + $t('k1')],
                                iconPath: '/static/images/detail/Location.png',
                            },
                        ]"
                        style="width: 100%; height: 290rpx; border-radius: 2px"
                        @tap="openLocation"
                    ></map>
                    <view v-for="(item, i) in detail.nearby" :key="i" class="row items-center justify-between fs-sm mb-sm mt-md">
                        <view class="row items-center">
                            <image src="/static/images/detail/maktap.png" style="width: 32rpx; height: 32rpx"></image>
                            <view class="mx-xs">{{ item['nearby_name' + $t('k1')] }}</view>
                        </view>
                        <view class="text-gray">{{ item.km }}km</view>
                    </view>
                </view>

                <view class="pa-md bg-white rounded-26" style="margin-top: 10rpx" v-if="(detail['detail' + $t('k1')] && detail['detail' + $t('k1')] != 'null') || furnitureList.length > 0">
                    <view class="row items-center justify-between mb-md">
                        <view class="fs-xl">{{ $t('fangyuanliangdian') }}</view>
                    </view>
                    <view>{{ detail['detail' + $t('k1')] }}</view>

                    <view class="py-md row flex-wrap items-center px-sm border-b" v-if="type == 'zufang'">
                        <view v-for="(item, i) in furnitureList" :key="i" class="fs-sm ma-xs rounded-26 row items-center" style="background: #f6f6f6; padding: 2px 0">
                            <u-icon :name="item.status ? 'checkmark' : 'close'" :color="item.status ? 'black' : 'gray'" class="mx-xs" size="13" />
                            <view :class="item.status ? '' : 'text-gray'" class="ml-sm">{{ item['name' + $t('k1')] }}</view>
                        </view>
                    </view>
                </view>

                <view class="pa-md bg-white rounded-26" style="margin-top: 10rpx" v-if="detail.brokerInfo || (detail.brokerList && detail.brokerList.length > 0)">
                    <!-- ۋاستىچى -->
                    <template v-if="detail.brokerInfo">
                        <view class="my-sm">{{ $t('jingjiren') }}</view>
                        <view class="row justify-between full-width bg-white rounded-26">
                            <view class="row items-center">
                                <image :src="detail.brokerInfo.avatar ? detail.brokerInfo.avatar : '/static/images/my/default-avatar.png'" style="width: 100rpx; height: 100rpx" class="rounded-50"></image>
                                <view class="mx-sm" v-if="detail.brokerInfo.name">
                                    <view class="fs-md text-nowrap" style="width: 300rpx" :class="'dir-' + $tools.strDir(detail.brokerInfo ? detail.brokerInfo.name : '')">{{ detail.brokerInfo.name }}</view>
                                </view>
                            </view>
                            <view class="row items-center">
                                <view class="row items-center mx-xs pa-sm rounded-50" style="background: #d7fff5">
                                    <u-icon name="chat-fill" color="#42D3AD" size="30"></u-icon>
                                </view>
                                <view class="row items-center mx-xs pa-sm rounded-50" style="background: #d7fff5" @click="onClickPhone(detail.brokerInfo.phone)" v-if="detail.brokerInfo.phone">
                                    <u-icon name="phone-fill" color="#42D3AD" size="30"></u-icon>
                                </view>
                            </view>
                        </view>
                    </template>
                    <!-- باشقا ۋاستىچىلەر -->
                    <template v-if="detail.brokerList && detail.brokerList.length > 0">
                        <view style="border-bottom: 2px solid #f1f1f1" class="mt-lg mb-md"></view>
                        <view class="my-sm">{{ $t('zixunqitajingjiren') }}</view>
                        <view class="row justify-between full-width bg-white rounded-26" v-for="(item, i) in detail.brokerList" :key="i">
                            <view class="row items-center">
                                <image :src="item.avatar" style="width: 100rpx; height: 100rpx" class="rounded-50"></image>
                                <view class="mx-sm">
                                    <view class="fs-md text-nowrap" style="width: 300rpx">{{ item['name' + $t('k1')] }}</view>
                                </view>
                            </view>
                            <view class="row items-center">
                                <view class="row items-center mx-xs pa-sm rounded-50 wx-button p-relative button" style="background: #d7fff5">
                                    <button openType="contact"></button>
                                    <u-icon name="chat-fill" color="#42D3AD" size="30"></u-icon>
                                </view>
                                <view class="row items-center mx-xs pa-sm rounded-50" style="background: #d7fff5" @click="onClickPhone(item.phone)" v-if="item.phone">
                                    <u-icon name="phone-fill" color="#42D3AD" size="30"></u-icon>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>

                <view class="pa-md bg-white rounded-26" style="margin-top: 10rpx">
                    <view class="row items-center justify-between mb-md">
                        <view class="fs-xl">{{ $t('cainixihuan') }}</view>
                    </view>
                    <view class="d-flex flex-wrap items-center justify-between pt-xs">
                        <house-row v-for="(item, i) in housesSell" :item="item" :key="i" />
                    </view>
                </view>
            </view>
        </view>

        <view v-if="!detailLoading" class="p-fixed row justify-between pa-md full-width bg-white rounded-26" style="bottom: 0; box-sizing: border-box; z-index: 999; padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx)">
            <view class="row items-center">
                <image :src="detail.brokerInfo && detail.brokerInfo.avatar ? detail.brokerInfo.avatar : '/static/images/my/default-avatar.png'" style="width: 100rpx; height: 100rpx" class="rounded-50"></image>
                <view class="mx-xs">
                    <view class="fs-md text-nowrap" style="max-width: 210rpx" :class="'dir-' + $tools.strDir(detail.brokerInfo ? detail.brokerInfo.name : '')">{{ detail.brokerInfo ? detail.brokerInfo.name : '' }}</view>
                </view>
            </view>
            <view class="row items-center">
                <view class="row items-center mx-xs pa-sm rounded-26 wx-button p-relative button" style="background: #2f72f5">
                    <u-icon name="chat-fill" color="white" size="25"></u-icon>
                    <button openType="contact"></button>
                    <view class="text-white fs-md mx-xs">{{ $t('info') }}</view>
                </view>
                <view class="row items-center mx-xs pa-sm rounded-26 button" style="background: #42d3ad" @click="onClickPhone(detail.brokerInfo.phone)">
                    <u-icon name="phone-fill" color="white" size="25"></u-icon>
                    <view class="text-white fs-md mx-xs">{{ $t('phone') }}</view>
                </view>
            </view>
        </view>

        <!-- 返回顶部 -->
        <u-back-top :scroll-top="scrollTop" />
    </view>
</template>

<script>
// #ifdef H5
const jweixin = require('jweixin-module')
// #endif
const app = getApp()
export default {
    data() {
        return {
            furnitureList: [],
            scrollTop: 0,
            swiperTypesActive: 1,
            details: [
                { name: '单价', name_ug: 'يەككە باھاسى', v: 'square_price', type: 'maifang' },
                { name: '首付', name_ug: 'ئالدىن تۆلەيدىغان پۇل', v: 'advance_payment', type: 'maifang', valShow: true },
                // { name: '佣金', name_ug: 'مۇلازىمەت ھەققى', v: 'commission', type: 'maifang' },
                { name: '租金计算方式', name_ug: 'ئىجارە تۆلەش ئۇسۇلى', v: 'period', type: 'zufang' },
                { name: '订金', name_ug: 'زاكالەت پۇلى', v: 'deposit', type: 'zufang' },
                { name: '楼层', name_ug: 'قەۋەت', v: 'house_layers' },
                { name: '建筑面积', name_ug: 'ئەمەلىي كۆلەم', v: 'square_num' },
                { name: '上传时间', name_ug: 'چىقىرىلغان ۋاقىت', v: 'updated_at' },
                { name: '朝向', name_ug: 'يۆنىلىش', v: 'direction', k1: true, name1: '电梯', name1_ug: 'لىفىت', v1: 'elevator_num' },
                { name: '年代', name_ug: 'يىل سانى', v: 'create_time', type: 'maifang' },
                { name: '类型', name_ug: 'خاراكتىر', v: 'house_state' },
                { name: '装修', name_ug: 'بېزەك', v: 'fitment' },
                { name: '小区', name_ug: 'ئولتۇراق رايونى', v: 'plot' },
                { name: '区域', name_ug: 'تەۋە رايون', v: 'city_info' },
                // {k:'',v:''},
                // {k:'',v:''},
            ],
            period_list: [
                { label: '', val: '' },
                { label: this.$t('antian'), val: 1 },
                { label: this.$t('anzhou'), val: 2 },
                { label: this.$t('anyue'), val: 3 },
                { label: this.$t('annian'), val: 4 },
            ],
            house_stateList: [
                { label: '', val: '' },
                { label: this.$t('putongzhuzhai'), val: 1 },
                { label: this.$t('gongyu'), val: 2 },
                { label: this.$t('bieshu'), val: 3 },
                { label: this.$t('pingfang'), val: 4 },
                { label: this.$t('shangzhulou'), val: 5 },
                { label: this.$t('shangpu'), val: 6 },
                { label: this.$t('bangongshi'), val: 7 },
                { label: this.$t('qita'), val: 8 },
                { label: this.$t('shangpinfang'), val: 9 },
            ],
            fitmentList: [
                { label: '', val: '' },
                { label: this.$t('maopi'), val: 1 },
                { label: this.$t('jiandanzhuangxiu'), val: 2 },
                { label: this.$t('jingzhuangxiu'), val: 3 },
                { label: this.$t('haohuazhungxiu'), val: 4 },
            ],
            directionList: [
                { label: '', val: '' },
                { label: this.$t('dong'), val: 1 },
                { label: this.$t('nan'), val: 2 },
                { label: this.$t('xi'), val: 3 },
                { label: this.$t('bei'), val: 4 },
                { label: this.$t('dongxi'), val: 5 },
                { label: this.$t('nanbei'), val: 6 },
                { label: this.$t('dongnan'), val: 7 },
                { label: this.$t('xinan'), val: 8 },
                { label: this.$t('dongbei'), val: 9 },
                { label: this.$t('xibei'), val: 10 },
            ],
            housesSell: [],

            scrollTop_moment: false,
            into_moment: '',
            scrollTop_detail: false,
            into_detail: '',

            stickyTop: false,
            currentTab: 1, //1=本人信息，0=朋友圈
            swiperCurrent: 0,
            detailLoading: true,
            detail: {
                images: [],
                fav: 0,
                free_time: 0,
                id: 0,
                img: '',
                name: 'تەپسىلات',
                name_zh: '详情',
                price: 0,
                view: 0,
                fav: 0,
                voiceLength: 0,
                avatar: '',
                advance_payment: 0,
            },

            activeDetailIndex: 1,
            navBack: false,
            userid: 0,
            toUserId: 0,
            currentIndex: 0,
            isShowTopWindow: false,
            userData: { test: 0 },
            navStyle: {
                backBg: 0.4,
                backgroundBg: 0,
                backColor: 'rgba(256,256,256,1)',
            },
            type: 'maifang',
            settingData: {
                qrcode: '',
                iosVersion: '',
                customer_phone: '',
            },
            layer_levelList: [
                { name: '底楼层', name_ug: 'تۆۋەن قەۋەت' },
                { name: '中楼层', name_ug: 'ئوتتۇرا قەۋەت' },
                { name: '高楼层', name_ug: 'يۇقىرى قەۋەت' },
            ],
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
        const top = uni.upx2px(2)
        const { scrollTop } = e
        const percent = scrollTop / top
        this.navStyle.backgroundBg = parseInt(percent)
        this.navStyle.backBg = 0.8 * (0.5 - percent)
        this.navStyle.backColor = percent < 0.5 ? 'rgba(256,256,256,' + (0.5 - percent) * 2 + ')' : 'rgba(0,0,0,' + (percent - 0.5) * 2 + ')'

        if (e.scrollTop > 300) {
            this.stickyTop = true
        } else {
            this.stickyTop = false
        }
    },
    computed: {},
    onLoad(e) {
        this.getSettingData()
        if (e && e.inviter_id) {
            this.$u.vuex('inviter_id', e.inviter_id)
        }
        this.type = e.type == 'zufang' ? 'zufang' : 'maifang'
        this.toUserId = e.id
        this._detail(e.id)
        this.userid = uni.getStorageSync('uid')

        this.userData = uni.getStorageSync('user') || ''
        // if (e.in == 1) this.buyShow = true
        this.houseDetailSell()
    },
    onShow() {
        if (this.detail.id) this._detail(this.detail.id)
        let pages = getCurrentPages()
        this.navBack = pages[pages.length - 2] ? true : false
    },
    onShareAppMessage(e) {
        const d = {
            title: this.detail['name' + this.$t('k1')],
            path: '/pages/detail/index?id=' + this.detail.id + '&parent_id=' + this.userid + '&type=' + this.type,
        }
        return d
    },
    onShareTimeline(res) {
        return {
            title: this.detail['name' + this.$t('k1')],
            path: '/pages/detail/index?id=' + this.detail.id + '&parent_id=' + this.userid + '&type=' + this.type,
            imageUrl: this.detail.avatar,
        }
    },
    mounted() {},
    created() {},
    methods: {
        checkThirdPart(kawat, jami) {
            let num1 = Number(kawat)
            let num2 = Number(jami)
            if (num1 <= num2) {
                const third = num2 / 3
                if (num1 <= third) {
                    return this.layer_levelList[0]['name' + this.$t('k')] // num1 在前1/3
                } else if (num1 > third && num1 <= 2 * third) {
                    return this.layer_levelList[1]['name' + this.$t('k')] // num1 在中间1/3
                } else {
                    return this.layer_levelList[2]['name' + this.$t('k')] // num1 在后1/3
                }
            } else {
                let str = num1
                str += this.$t('dir') == 'rtl' ? '-' : '' + this.$t('lou')
                str += this.$t('lou')
                return str
            }
        },
        getSettingData() {
            this.$uniapi('/setting').then((res) => {
                if (res.code == 0) {
                    this.settingData = res.data
                }
            })
        },
        collect() {
            let data = {
                house_id: this.detail.id,
                type: this.type == 'maifang' ? 'sell' : 'rent',
            }
            this.$uniapi('/collect', data, 'post').then((res) => {
                if (res.code == 0) {
                    this.detail.isCollection = res.msg == '收藏成功'
                    this.$forceUpdate()
                    uni.showToast({
                        title: this.$t(res.msg),
                        duration: 2000,
                        icon: 'none',
                    })
                }
            })
        },
        houseDetailSell() {
            this.$uniapi('/houseDetailSell', { page: 1 }).then((res) => {
                if (res.code == 0) {
                    this.housesSell = res.data.data
                }
            })
        },
        openLocation() {
            uni.openLocation({
                latitude: Number(this.detail.latitude),
                longitude: Number(this.detail.longitude),
                name: this.detail.plot,
                address: this.detail.address || '',
                success: () => {
                    console.log('يول باشلاش مۇۋەپپەقىيەتلىك ئېچىلدى')
                },
                fail: (err) => {
                    console.error('يول باشلاش مەغلۇپ بولدى:', err)
                },
            })
        },
        async onClickPhone(phone) {
            console.log('phone:', phone)
            phone = this.settingData.customer_phone
            if (!phone) return
            uni.makePhoneCall({
                phoneNumber: phone,
                success: function () {
                    console.log('拨打电话成功！')
                },
                fail: function (error) {
                    console.log('拨打电话失败：', error.errMsg)
                },
            })
        },

        swiperChange(e) {
            this.swiperCurrent = e.current
        },

        // 获取详情
        async _detail(infoId) {
            if (infoId) {
                let api = '/sellHouse/'
                if (this.type == 'zufang') api = '/rentHouse/'
                const res = await this.$uniapi(api + infoId)
                this.detailLoading = false
                if (res.code == '00000') {
                    let detail = res.data
                    this.detail = detail
                    if (this.type == 'zufang' && this.detail.furniture) {
                        try {
                            this.furnitureList = JSON.parse(this.detail.furniture)
                        } catch (error) {}
                    }
                } else {
                    uni.showToast({
                        title: res.msg,
                        duration: 2000,
                        icon: 'none',
                    })
                }
            }
        },

        goToChatPage() {
            this.isShowTopWindow = false
            uni.navigateTo({
                url: '/pages/chat/index?id=' + this.detail.id,
            })
        },

        // 关注||取消
        _follow() {
            this.isShowTopWindow = false
            uni.showLoading({
                title: '',
            })
            this.$uniapi
                .follow({
                    followId: this.detail.id,
                })
                .then((res) => {
                    uni.hideLoading()
                    if (res.code == 0) {
                        if (res.data == '取消关注') {
                            this.detail.followed = 0
                            uni.showToast({
                                title: this.$t('unfollowed'),
                                duration: 2000,
                                icon: 'none',
                            })
                        } else if (res.data == '已关注') {
                            this.detail.followed = 1
                            uni.showToast({
                                title: this.$t('followed'),
                                duration: 2000,
                                icon: 'none',
                            })
                        }
                    }
                })
                .catch((err) => {
                    uni.hideLoading()
                })
        },

        showTopWindowClick() {
            this.isShowTopWindow = !this.isShowTopWindow
        },
    },
}
</script>
<style scoped lang="scss">
.info-detail {
    width: 100vw;
    box-sizing: border-box;
    padding-bottom: 220rpx;
    background: #f9f9f9;
}
.mtt {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    height: 30px;
    box-sizing: border-box;
    font-size: 13px;
}
.occupation::before,
.occupation::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 70%;
    top: 15%;
    left: 0;
    background: #aaaaaa;
}

.occupation::before {
    left: auto !important;
    right: 0;
}

.top-bg-box {
    background-image: linear-gradient(#fffdde, #fffefd, #fff);
}

.info-data-title-bg {
    right: 0;
    bottom: 0px;
    content: '';
    width: 100%;
    height: 60%;
    background: #fff5f5;
    border-radius: 10px;
}

.detail-img {
    border-radius: 12px;
    margin: 0 1px;
    width: 41px;
    height: 41px;
}

.detail-img.active {
    width: 44px !important;
    height: 44px !important;
}

.online-icon {
    background: #7ffca9;
    border: 1px solid white;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
}

.tabs-item {
    position: relative;
}

.tabs-item::before {
    position: absolute;
    content: '';
    width: 1px;
    height: 10px;
    background: #979797;
    left: 1px;
    top: 30%;
}

.tabs-item:first-child::before {
    display: none;
}

.label-box {
    border-radius: 30rpx;
    background-color: #f6f6f69e;
    backdrop-filter: blur(10rpx);
}

.top-window-view {
    width: 120px;
    position: fixed;
    top: 45px;
    background-color: white;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    z-index: 1999;
}

.top-window-item {
    font-size: 14px;
}

.line {
    height: 1px;
    background-color: #f4f4f4;
    margin: 10px 0;
}

.top-window-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #fff0;
    z-index: 1998;
}
</style>